<template>
  <div>
    <el-col :span="24">
      <el-menu
          active-text-color="#ffd04b"
          background-color="#545c64"
          class="el-menu-vertical-demo"
          default-active=""
          :default-openeds="['1']"
          text-color="#fff"
      >
        <el-sub-menu index="1">
          <template #title>
            <el-icon><location /></el-icon>
            <span>后台管理系统</span>
          </template>
          <template v-for="menu in listData">
            <el-menu-item v-if="!menu.children" :key="menu.id" :index="menu.id.toString()" @click="goto(menu)">
              <el-icon>
                <component :is=" menu.icon " />
              </el-icon>
              {{ menu.authName }}</el-menu-item>
            <el-sub-menu  v-if="menu.children" :key="menu.id" :index="menu.id.toString()">
              <template #title>
                <el-icon>
                <component :is=" menu.icon " />
              </el-icon>
                {{ menu.authName }}
              </template>
              <el-menu-item v-for="childMenu in menu.children" :key="childMenu.id.toString()" :index="childMenu.id.toString()" @click="goto(childMenu)">
                <el-icon>
                  <component :is=" childMenu.icon " />
                </el-icon>
                {{ childMenu.authName }}
              </el-menu-item>
            </el-sub-menu>
          </template>
        </el-sub-menu>
      </el-menu>
    </el-col>
  </div>
</template>
<script setup>
import {userMenuList,adminMenuList} from "../utils/const.js"
import TokenStorage from "../utils/token.js";
import {useCounterStore} from "../stores/counters.js";
import { useRouter } from 'vue-router'
import {onMounted} from "vue";
import {ref} from "vue";
const router = useRouter();
const userStore =useCounterStore();
const listData = ref([]);
const getMenuList =()=>{
    let message = TokenStorage.get();
    let role = message.role
    console.log(role);
    if(role==="user"){
      listData.value = userMenuList
    }
    else {
      listData.value =adminMenuList
    }
}
onMounted(()=>{
   getMenuList()
})
const goto = (menu) => {
  userStore.selectMenu(menu);
  // router.push({ name: menu.path });
   // router.push({name:menu.path})
  router.push({ name: menu.path.name })
}
</script>
<style scoped>
.el-menu-vertical-demo{
  height: 100vh;
  overflow: hidden;
  border-right: none;
}

</style>
